@charset "utf-8";

@xiaomiColor:#ff6a00;
@border:1px solid #e0e0e0;
.onebox(@one:235px){width: @one;}
@box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
@box-shadowB: 0 15px 25px 0 rgba(0, 0, 0, 0.1);
@box-shadowS: 0 2px 5px 0 rgba(0, 0, 0, 0.05);

@import url(./header.less);
@import url(./sidebar.less);

main{
    .banner{
        height: 460px;
        background-color: burlywood;
        position: relative;
        >img{
            width: 100%;
        }
        .banner_top{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 15;
            display: flex;
            .banner_nav{
                background: rgba(119, 119, 119, 0.5);
                .onebox();
                display: flex;
                flex-flow: column;
                justify-content: center;
                a{
                    display: block;
                    line-height: 43px;
                    color: white;
                    display: flex;
                    justify-content: space-between;
                    padding: 0 25px 0 30px;
                    font-size: 14px;
                    & :last-child{
                        color: rgba(255, 255, 255, 0.8);
                    }
                }
                &>li:hover{
                    background-color: @xiaomiColor;
                    .banner_subnav{display: flex;}
                }
                >li:nth-child(3) .banner_subnav{
                    width: 690px;
                }
                .banner_subnav{
                    background-color: white;
                    position: absolute;
                    left: 235px;
                    top: 0;
                    width: 990px;
                    height: 100%;
                    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, .5);
                    display: flex;
                    flex-flow: column;
                    flex-wrap: wrap;
                    align-content: start;
                    display: none;
                    li{
                        height: (100%/6);
                        width: (990px/4);
                        display: flex;
                        align-items: center;
                    }
                    a{
                        img{
                            height: 70px;
                        }
                        span{
                            color: #333;
                        }
                        &:hover span{
                            color: @xiaomiColor;
                        }
                    }
                    
                }
            }
            .banner_slide{
                flex: 1;
                display: flex;
                align-items: center;
                z-index: -5;
                justify-content: space-between;
                span{
                    width: 40px;
                    line-height: 70px;
                    text-align: center;
                    cursor: pointer;
                    color: #ddd;
                    &:last-child{
                        transform: rotate(180deg);
                    }
                    &:hover{
                        background-color: #7b7b7b;
                        color: white;
                    }
                }
            }
            .banner_click{
                position: absolute;
                right: 35px;
                bottom:  25px;
                cursor: default;
                z-index: -5;
                em{
                    display: inline-block;
                    box-sizing: border-box;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    border: 2px solid #999;
                    background-color: #777;
                    cursor:pointer;
                    &:hover{
                        background-color: #ddd;
                    }
                }
                
            }
        }
    }
    .news_release{
        height: 170px;
        margin-top: 15px;
        margin-bottom: 25px;
        display: flex;
        justify-content: space-between;
        .channel{
            .onebox();
            height: 100%;
            background-color: #5f5750;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            text-align: center;
            overflow: hidden;
            a{
                display: block;
                width: 73px;
                height: 60px;
                padding-top: 18px;
                color: darken(white,20%);
                border-top: 1px solid rgba(255, 255, 255, .05);
                border-left: 1px solid rgba(255, 255, 255, .05);
                span{
                    font-size: 25px;
                }
                p{
                    font-size: 12px;
                    line-height: 24px;
                }
                &:hover{
                    color: white;
                }
                &::after{
                    content: '';
                    display: block;
                    position: relative;
                    top: -75px;
                    left: -7px;
                    width: 14px;
                    height: 12px;
                    background-color: #5f5750;
                }
            }
            
        }
        img{
            height: 100%;
            transition: all .5s;
            &:hover{
                box-shadow: @box-shadowB
            }
        }
    }
    .seckill{
        .seckill_main{
            height: 340px;
            display: flex;
            #seckill{
                .onebox();
                background-color: #f1eded;
                border-top: 1px solid red;
                margin-right: 14px;
                padding-top: 60px;
                text-align: center;
                h4{
                    color: #e7221b;
                    font-size: 22px;
    
                }
                span{
                    color: #e53934;
                    font-size: 56px;
                    line-height: 116px;
                }
                p{
                    color: #706f6f;
                    font-size: 14px; 
                    line-height: 18px; 
                }
                em{
                    font-size: 20px;
                    line-height: 80px;
                    color: #81736a;
                    i{
                        padding: 5px 6px;
                        margin: 0 2px;
                        background-color: #605751;
                        color: white;
                    }
                }
            }
            .products_banner{
                flex: 1;
                overflow: hidden;
                ul.products_content{
                    width: 2000px;
                    height: 100%;
                    display: flex;
                    a{margin-right: 12px;height: 100%;}
                    & li:nth-of-type(odd) a{border-top: 1px solid red;}
                    & li:nth-of-type(even) a{border-top: 1px solid rgb(30, 155, 30);}
                }
            }
        }
    }
    section{
        background-color: #f5f5f5;
        .module_header{
            line-height: 62px;
            height: 62px;
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            h3{
                font-size: 20px;
                font-weight: lighter;
            }
            .next{
                position: absolute;
                bottom: 10px;
                right: 0;
                line-height: 24px;
                height: 24px;
                width: 70px;
                border: 1px solid #e0e0e0;
                display: flex;
                a{
                    flex: 1;
                    text-align: center;
                    color: #b0b0b0;
                    &:hover{
                        color: @xiaomiColor;
                    }
                }
                a:first-child{
                    border-right: 1px solid #e0e0e0;
                }
            }
            .more{
                a{  
                    font-size: 16px;
                    color: #333;
                    transition: all .5s;
                    span{
                        transition: all .5s;
                        margin-left: 5px;
                        font-size: 20px;
                        line-height: 100px;
                        border-radius: 50%;
                        color: #b0b0b0;
                    }
                    &:hover,&:hover span{
                        color: @xiaomiColor;
                    }
                }
            }
            .option{
                cursor: pointer;
                span{
                    border-bottom: 2px solid transparent;
                    margin-left: 25px;
                    transition: all .3s;
                    &.on,&:hover{
                        border-color: @xiaomiColor;
                        color: @xiaomiColor;
                    }
                }
                
            }
        }
        .module_main{
            display: flex;
            .module_img{
                .onebox();
                margin-right: 14px;
                display: flex;
                flex-flow: column;
                img{
                    transition: all .3s;
                    width: 100%;height: auto;
                    &:hover{
                        box-shadow: @box-shadowB;
                        transform: translateY(-3px);
                    }
                }
                & img:nth-child(2){margin-top: 15px;}
            }
            .module_content{
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-content: space-between;
                li{
                    height: 300px;
                    display: flex;
                    flex-flow: column;
                    a{
                        background-color: white;
                        transition: all .3s;
                        padding-bottom: 10px;
                        &:hover{
                            box-shadow: @box-shadowB;
                            transform: translateY(-3px);
                        }
                        img{height: 160px;margin-bottom: 10px;padding-top: 0;}
                    }
                    a.module_last{
                        display: flex;
                        flex-flow: row;
                        align-content: space-around;
                        div{width: 90px;img{padding-top: 0;margin-bottom: 0;}}
                        .module_last_pic span{font-size: 50px;margin-left: 25px;color: @xiaomiColor;}
                    }
                    a.module_more{
                        margin-top: 14px;
                        p{font-size: 18px;line-height: 24px;}
                        span{color: #999}
                    }
                }
                
            }
        }
        .module_content a{
            .onebox();
            display: block;
            flex: 1;
            background-color: white;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            img{
                height: 120px;
                width: auto;
                margin-bottom: 40px;
                padding-top: 25px;
            }
            p{
                font-size: 14px;
                line-height: 20px;
                color: #333;
                margin-top: 10px;
                em{
                    color: @xiaomiColor;
                }
                i{
                    text-decoration:line-through;
                    color: #aaa;
                }
            }
            span{font-size: 12px;color: #aaa;}
        }
        .module_banner{
            display: block;
            padding-top: 22px;
            padding-bottom: 18px;
            img{width: 100%;}
        }
    }
}

@import url(./footer.less);
